<script setup lang="ts">
import {
  BellOutlined,
  CommentOutlined,
  UsergroupAddOutlined,
  HeartOutlined,
  FireOutlined,
  SettingOutlined
} from '@ant-design/icons-vue'
import {message} from "ant-design-vue";
import {onBeforeMount, ref} from "vue";
import {getUserReceiveNoticeCount} from "@/api/system/notice";
import {ECode, PagePath} from "@/util/commonUtil";
import {cookieToken} from "@/config/CookieConfig";
import {getCookie} from "@/util/cookieUtil";
import {router} from "@/router";
// 用户收到的评论数
const userReceiveCommentCount = ref<number>(0)
// 用户收到的点赞数
const userReceivePraiseCount = ref<number>(0)
// 用户收到的系统通知数
const userReceiveSystemCount = ref<number>(0)
// 用户收到的关注数
const userReceiveWatchCount = ref<number>(0)
// 用户收到的消息数
const userReceiveMessageCount = ref<number>(0)
// 用户收到的收藏数
const userReceiveCollectCount = ref<number>(0)
const userMessageTotal = ref<number>(0)

onBeforeMount(() => {
  setUserReceiveCommentCount()
})

function setUserReceiveCommentCount() {
  getUserReceiveNoticeCount().then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      userReceiveCommentCount.value = response.data.userReceiveCommentCount;
      userReceivePraiseCount.value = response.data.userReceivePraiseCount;
      userReceiveSystemCount.value = response.data.userReceiveSystemCount;
      userReceiveWatchCount.value = response.data.userReceiveWatchCount;
      userReceiveMessageCount.value = response.data.userReceiveMessageCount;
      userReceiveCollectCount.value = response.data.userReceiveCollectCount;
      userMessageTotal.value = response.data.userReceiveCommentCount + response.data.userReceivePraiseCount + response.data.userReceiveSystemCount + response.data.userReceiveWatchCount + response.data.userReceiveMessageCount + response.data.userReceiveCollectCount;
    }
  })
}

function handleClick(e: any) {
  let isLogin = getCookie(cookieToken)
  if (!isLogin) {
    message.warning("请先登录")
    return
  }
  switch (e.key) {
    case "comment": {
      if (userReceiveCommentCount.value > 0) {
        // 设置已阅读
        let params: any = {};
        params.noticeType = "1";
      }
      router.push({path: PagePath.Notice, query: {noticeType: "1"}});
    }
      break
    case "watch": {
      if (userReceiveWatchCount.value > 0) {
        // 设置已阅读
        let params: any = {};
        params.noticeType = "2";
      }
      router.push({path: PagePath.Notice, query: {noticeType: "2"}});
    }break
    case "praise": {
      if (userReceivePraiseCount.value > 0) {
        // 设置已阅读
        let params: any = {};
        params.noticeType = "3";
      }
      router.push({path: PagePath.Notice, query: {noticeType: "3"}});
    }break
    case "collect": {
      if (userReceiveCollectCount.value > 0) {
        // 设置已阅读
        let params: any = {};
        params.noticeType = "4";
      }
      router.push({path: PagePath.Notice, query: {noticeType: "4"}});
    }break
    case "system": {
      if (userReceiveSystemCount.value > 0) {
        // 设置已阅读
        let params: any = {};
        params.noticeType = "5";
      }
      router.push({path: PagePath.Notice, query: {noticeType: "5"}});
    }break
  }
}
</script>

<template>
  <div class="user-notice relative h-8 w-8">
    <a-dropdown placement="bottom">
      <a-badge :count="userMessageTotal">
        <a-avatar shape="circle" class="cursor-pointer">
          <template #icon>
            <BellOutlined/>
          </template>
        </a-avatar>
      </a-badge>
      <template #overlay>
        <a-menu @click="handleClick">
          <a-menu-item key="comment">
            <a-badge :dot="userReceiveCommentCount > 0">
              <CommentOutlined/>
            </a-badge>
            评论
          </a-menu-item>
          <a-menu-item key="watch">
            <a-badge :dot="userReceiveWatchCount > 0">
              <UsergroupAddOutlined/>
            </a-badge>
            关注
          </a-menu-item>
          <a-menu-item key="praise">
            <a-badge :dot="userReceivePraiseCount > 0">
              <FireOutlined/>
            </a-badge>
            点赞
          </a-menu-item>
          <a-menu-item key="collect">
            <a-badge :dot="userReceiveCollectCount > 0">
              <HeartOutlined/>
            </a-badge>
            收藏
          </a-menu-item>
          <a-menu-item key="system">
            <a-badge :dot="userReceiveSystemCount > 0">
              <SettingOutlined/>
            </a-badge>
            系统
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<style scoped lang="less">
:deep(.ant-badge-count) {
  min-width: 15px;
  height: 15px;
  font-size: 10px;
  line-height: 16px;
}

:deep(.ant-avatar) {
  background: none;
  color: #999;
  border: var(--border);
}
</style>
